<script setup lang="ts">
import type {VNodeChild} from "vue";
import {isFunction} from "@v-c/utils";

defineProps<{
  title?: string
}>()
function renderTitle(title: VNodeChild | (() => VNodeChild)) {
  console.log("title", title)
  if (isFunction(title))
    return title()

  return title
}
</script>

<template>
  <div class="bg-[var(--bg-color)]" px-24px mb-24px>
    <div flex mt-8px justify-between>
      <div flex items-center my-4px of-hidden>
        <span text-20px line-height-32px mr-12px mb-0 truncate font-600>{{title}}</span>
      </div>
    </div>
    <div pt-12px>
      <div flex w-full>
        <div flex-auto>
          <slot name="content" />
        </div>
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>

</style>
